<%@page import="com.trw.trp.bean.UserBean"%>

<%@ include file="header.jsp"%>


<%
UserBean user = (UserBean) session.getAttribute("currentUser");
%>

<table align="center" cellpadding="0" cellspacing="0" height="100%"  width="100%"
	border="0">
	<tr valign=top>
		<td align='left' width="50%">
			<div id="searchDiv"/>
		</td>
		<td align='left'>
			<br><div id="searchDiv2"/>
			<br><br><br><br><div id="searchDiv3"/>
		</td>
	</tr>
	<tr height="45%">
		<td colspan=2></td>
	</tr>
</table>

<script type="text/javascript">
function doEdit(orderId){
	document.location='editOrder.action?orderId='+orderId;
}

function doDel(orderId,orderNumber,panelId){
	Ext.MessageBox.confirm('Confirm', 'Do you want to delete the request['+orderNumber+']?', function(btn){
		if(btn == 'yes'){
			var grid=Ext.getCmp(panelId);
			grid.getEl().mask('deleting...');
			Ext.Ajax.request({
				url: 'deleteOrder.action',
				params: {
					orderId:orderId
				},
				success: function(response){
					var result = Ext.util.JSON.decode(response.responseText);
					Ext.Msg.alert('Info', result.message);
					grid.getEl().unmask();
					grid.getStore().loadPage(1,{params:{period:Ext.getCmp('periodCombo').getValue()}});
					grid.getView().refresh();
				},
				failure: function(response){
					Ext.Msg.alert('Warning', response.responseText);
					grid.getEl().unmask();
				}
			});	
		}
	});
}

function searchWithNo(){
	var box = Ext.create('Ext.window.MessageBox', {
		title: 'A TEST',
		msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
		buttons: Ext.Msg.YESNOCANCEL
	});
	box.show();
	//Ext.MessageBox.prompt('Request Search', 'Request No:', showResultText);
	return false;
}

function listRecords(panelId){
	var grid = Ext.getCmp(panelId);
	if(grid){
		grid.setVisible(!grid.isVisible());
	}
}

/*Ext.require([
    'Ext.ux.grid.FiltersFeature'
]);*/

Ext.onReady(function(){

var searchPanel, searchPanel2, searchPanel3;
<%if("Test Engineer".equals(user.getPosition())){%>
if(!searchPanel){
	var store = new Ext.data.Store({
        autoLoad: false,
		pageSize: 20,
		fields:['orderNumber','prjNumber', 'prjName', 'status','statusName', 'inputStatus','orderId'],
		proxy: {
			type: 'ajax',
			url: 'getOrders.action',  // url that will load data with respect to start and limit params
			reader: {
				type: 'json',
				root: 'items',
				totalProperty: 'size'
			}
		}
	});
	
	 var bbar = new Ext.PagingToolbar({  
		store: store,  
		displayInfo: true,
		prependButtons: true,  
		displayMsg : 'Record {0} ~ {1}, Total: {2}',     
		emptyMsg : "No Record",
		doLoad:function(start){  
		}  
	});
	
	searchPanel = Ext.create('Ext.grid.Panel', {
			title: 'Requests History List',
			loadMask: true,
			forceFit:true,
			autoScroll:true,
			tbar: [{
				xtype:'textfield',
				fieldLabel:'Project Name',
				id:'txtPrjName',
				labelWidth:80,
				width:200
			},{
				xtype: 'button',
				text: 'Search',
				listeners:{
					'click':function(){
						searchPanel.getStore().loadPage(1,{params:{period:Ext.getCmp('periodCombo').getValue()}});
						searchPanel.getView().refresh();
					}
				}
			}],
			columns: [
				{ header: 'Order Number',  dataIndex: 'orderNumber', width: 150},
				{ header: 'Project Number',  dataIndex: 'prjNumber', width: 150},
				{ header: 'Project Name',  dataIndex: 'prjName', width: 150},
				{ header: 'Status',  dataIndex: 'statusName', width: 260},
				{
					xtype: 'actioncolumn',
					width: 40,
					items: [{
						icon   : 'images/view.gif',
						tooltip: 'View Request',
						handler: function(grid, rowIndex, colIndex) {
							var orderId = searchPanel.getStore().getAt(rowIndex).data.orderId;
							document.location='viewOrder.action?orderId='+orderId;
						}
					}]
				}
			],
			store: store,
			bbar: bbar, 
			height: 500,
			width: 500
	});
	
	Ext.create('Ext.Panel', {
		id: 'searchPanel',
		renderTo: 'searchDiv',
		bodyStyle:'padding:5px ',
		border:0,
		layout: {
			type: 'table',
			columns: 1
		},
		items:[{
			xtype:'combo',
			queryMode: 'local',
			id: 'periodCombo',
			valueField: 'value',
			displayField: 'text', 
			store: new Ext.create('Ext.data.Store', {
					fields: ['value', 'text'],
					data: [
						{"value":"0", "text":"within 3 months"},
						{"value":"1", "text":"3 months ago"}
					]
				}),
			value: "0",
			listeners: {
				"change" : function(combo,newValue,oldValue){
					searchPanel.getStore().loadPage(1);
					searchPanel.getView().refresh();
				}
			}
		},searchPanel]
	});
	store.on('beforeload', function (store, options) {
        var new_params = { period: Ext.getCmp('periodCombo').getValue(), teUserId:'<%=user.getUserId()%>', prjName: Ext.getCmp('txtPrjName').getValue() };
        Ext.apply(store.proxy.extraParams, new_params);
    });
	
	searchPanel.getStore().loadPage(1,{params:{period:Ext.getCmp('periodCombo').getValue()}});
	searchPanel.getView().refresh();
}
<%}else{%>
if(!searchPanel){
	var store = new Ext.data.Store({
        autoLoad: false,
		pageSize: 20,
		fields:['orderNumber','prjNumber', 'prjName', 'status','statusName', 'inputStatus','orderId'],
		proxy: {
			type: 'ajax',
			url: 'getOrders.action',  // url that will load data with respect to start and limit params
			reader: {
				type: 'json',
				root: 'items',
				totalProperty: 'size'
			}
		}
	});
	
	 var bbar = new Ext.PagingToolbar({  
		store: store,  
		displayInfo: true,
		prependButtons: true,  
		displayMsg : 'Record {0} ~ {1}, Total: {2}',     
		emptyMsg : "No Record",
		doLoad:function(start){  
		}  
	});

	/*var filters = {
        ftype: 'filters',
        // encode and local configuration options defined previously for easier reuse
        encode: true, // json encode the filter query
        local: true,   // defaults to false (remote filtering)
        filters: [{
            type: 'string',
            dataIndex: 'prjName'
        }]
    };*/
	
	searchPanel = Ext.create('Ext.grid.Panel', {
			title: 'Created Requests History List',
			loadMask: true,
			forceFit:true,
			autoScroll:true,
			//features: [filters],
			tbar: [{
				xtype:'textfield',
				fieldLabel:'Project Name',
				id:'txtPrjName',
				labelWidth:80,
				width:200
			},{
				xtype: 'button',
				text: 'Search',
				listeners:{
					'click':function(){
						searchPanel.getStore().loadPage(1,{params:{period:Ext.getCmp('periodCombo').getValue()}});
						searchPanel.getView().refresh();
					}
				}
			}],
			columns: [
				{ header: 'Order Number',  dataIndex: 'orderNumber', width: 150},
				{ header: 'Project Number',  dataIndex: 'prjNumber', width: 150},
				{ header: 'Project Name',  dataIndex: 'prjName', width: 150},
				{ header: 'Status',  dataIndex: 'statusName', width: 260},
				{
					xtype: 'actioncolumn',
					width: 40,
					items: [{
						icon   : 'images/view.gif',
						tooltip: 'View Request',
						handler: function(grid, rowIndex, colIndex) {
							var orderId = searchPanel.getStore().getAt(rowIndex).data.orderId;
							document.location='viewOrder.action?orderId='+orderId;
						}
					}]
				},
				{
					xtype: 'gridcolumn',
					width: 40,
					renderer: function(value,a,obj,idx){
						if (obj.data.status>=100 || obj.data.status>=3) {
							return '<img title="Edit Request" src="images/edit2.gif"/>';
						}else{
							var orderId = searchPanel.getStore().getAt(idx).data.orderId;
							return '<img title="Edit Request" src="images/edit.gif" onclick="doEdit('+orderId+')"/>';
						}
					}
				},
				{
					xtype: 'gridcolumn',
					width: 40,
					renderer: function(value,a,obj,idx){
						if (obj.data.status==0 || obj.data.status==-2) {
							var orderId = searchPanel.getStore().getAt(idx).data.orderId;
							var orderNumber = searchPanel.getStore().getAt(idx).data.orderNumber;
							return '<img title="Delete Request" src="images/delete.gif" onclick="doDel('+orderId+',\''+orderNumber+'\',\''+searchPanel.getId()+'\')"/>';
						}else{
							return '';
						}
					}
				}
			],
			store: store,
			bbar: bbar, 
			height: 500,
			width: 550
	});
	
	Ext.create('Ext.Panel', {
		id: 'searchPanel',
		renderTo: 'searchDiv',
		bodyStyle:'padding:5px ',
		defaultType: 'textfield',
		border:0,
		layout: {
			type: 'table',
			columns: 1
		},
		items:[{
			xtype:'combo',
			queryMode: 'local',
			id: 'periodCombo',
			valueField: 'value',
			displayField: 'text', 
			store: new Ext.create('Ext.data.Store', {
					fields: ['value', 'text'],
					data: [
						{"value":"0", "text":"within 3 months"},
						{"value":"1", "text":"3 months ago"}
					]
				}),
			value: "0",
			listeners: {
				"change" : function(combo,newValue,oldValue){
					searchPanel.getStore().loadPage(1);
					searchPanel.getView().refresh();
				}
			}
		},searchPanel]
	});
	store.on('beforeload', function (store, options) {
        var new_params = { period: Ext.getCmp('periodCombo').getValue(), userId:'<%=user.getUserId()%>', prjName: Ext.getCmp('txtPrjName').getValue() };
        Ext.apply(store.proxy.extraParams, new_params);
    });
	
	searchPanel.getStore().loadPage(1,{params:{period:Ext.getCmp('periodCombo').getValue()}});
	searchPanel.getView().refresh();
}
<%}%>


<%if("Test Engineer".equals(user.getPosition())){%>
//list pending list
if(!searchPanel2){
	var store = new Ext.data.Store({
        autoLoad: true,
		fields:['orderNumber', 'prjNumber', 'prjName', 'status','statusName', 'inputStatus','orderId'],
		proxy: {
			type: 'ajax',
			url: 'getOrdersNeedApprove.action',  // url that will load data with respect to start and limit params
			reader: {
				type: 'json',
				root: 'items',
				totalProperty: 'size'
			}
		},
		listeners:{
			load:function(store,records,successful,opts){
				Ext.getCmp('approveMsg').update('<font size=3>You have <a href="#" onclick="listRecords(\'appriveGrid\')">'+records.length+'</a> request(s) need approve.</font>');
			}
		}
	});
	searchPanel2 = Ext.create('Ext.Panel', {
		id: 'searchPanel2',
		renderTo: 'searchDiv2',
		forceFit:true,
		autoScroll:true,
		border:false,
		layout:'vbox',
		items:[{
			xtype:'label',
			id:'approveMsg',
			height:30
		},{
			xtype:'grid',
			title:'Pending Requests List',
			id:'appriveGrid',
			forceFit:true,
			loadMask:true,
			hidden:true,
			columns: [
				{ header: 'Order Number',  dataIndex: 'orderNumber', width: 150},
				{ header: 'Project Number',  dataIndex: 'prjNumber', width: 150},
				{ header: 'Project Name',  dataIndex: 'prjName', width: 150},
				{ header: 'Status',  dataIndex: 'statusName', width: 260},
				{
					xtype: 'actioncolumn',
					width: 40,
					items: [{
						icon   : 'images/view.gif',
						tooltip: 'View Order',
						handler: function(grid, rowIndex, colIndex) {
							var orderId = grid.getStore().getAt(rowIndex).data.orderId;
							document.location='viewOrder.action?orderId='+orderId;
						}
					}]
				}
			],
			store: store,
			autoHeight:true,
			width: 500,
			emptyText:'no request need approve.'
		}]
	});
}

//list all created list
if(!searchPanel3){
	var store = new Ext.data.Store({
        autoLoad: true,
		pageSize: 20,
		fields:['orderNumber','prjNumber', 'prjName', 'status','statusName', 'inputStatus','orderId'],
		proxy: {
			type: 'ajax',
			url: 'getOrders.action',
			extraParams:{
				userId:'<%=user.getUserId()%>'
			},
			reader: {
				type: 'json',
				root: 'items',
				totalProperty: 'size'
			}
		},
		listeners:{
			load:function(store,records,successful,opts){
				Ext.getCmp('requestMsg2').update('<font size=3>You have created <a href="#" onclick="listRecords(\'requestHistoryGrid\')">'+records.length+'</a> request(s).</font>');
			}
		}
	});
	
	 var bbar = new Ext.PagingToolbar({  
		store: store,  
		displayInfo: true,
		prependButtons: true,  
		displayMsg : 'Record {0} ~ {1}, Total: {2}',     
		emptyMsg : "No Record",
		doLoad:function(start){  
		}  
	});

	searchPanel3 = Ext.create('Ext.grid.Panel', {
			title: 'Created Requests History List',
			id:'requestHistoryGrid',
			loadMask: true,
			forceFit:true,
			autoScroll:true,
			hidden:true,
			columns: [
				{ header: 'Order Number',  dataIndex: 'orderNumber', width: 150},
				{ header: 'Project Number',  dataIndex: 'prjNumber', width: 150},
				{ header: 'Project Name',  dataIndex: 'prjName', width: 150, filter:{type: 'string'}},
				{ header: 'Status',  dataIndex: 'statusName', width: 260},
				{
					xtype: 'actioncolumn',
					width: 40,
					items: [{
						icon   : 'images/view.gif',
						tooltip: 'View Request',
						handler: function(grid, rowIndex, colIndex) {
							var orderId = searchPanel3.getStore().getAt(rowIndex).data.orderId;
							document.location='viewOrder.action?orderId='+orderId;
						}
					}]
				},
				{
					xtype: 'gridcolumn',
					width: 40,
					renderer: function(value,a,obj,idx){
						if (obj.data.status>=100 || obj.data.status>=3) {
							return '<img title="Edit Request" src="images/edit2.gif"/>';
						}else{
							var orderId = searchPanel3.getStore().getAt(idx).data.orderId;
							return '<img title="Edit Request" src="images/edit.gif" onclick="doEdit('+orderId+')"/>';
						}
					}
				},
				{
					xtype: 'gridcolumn',
					width: 40,
					renderer: function(value,a,obj,idx){
						if (obj.data.status==0 || obj.data.status==-2) {
							var orderId = searchPanel3.getStore().getAt(idx).data.orderId;
							var orderNumber = searchPanel3.getStore().getAt(idx).data.orderNumber;
							return '<img title="Delete Request" src="images/delete.gif" onclick="doDel('+orderId+',\''+orderNumber+'\',\''+searchPanel3.getId()+'\')"/>';
						}else{
							return '';
						}
					}
				}
			],
			store: store,
			bbar: bbar,
			width: 500,
			emptyText:'You have not created request yet.'
	});
	
	Ext.create('Ext.Panel', {
		id: 'searchPanel3',
		renderTo:'searchDiv3',
		forceFit:true,
		autoScroll:true,
		border:false,
		layout:'vbox',
		items:[{
			xtype:'label',
			id:'requestMsg2',
			height:30
		},searchPanel3]
	});
}
<%}%>
});
</script>

<%@ include file="footer.jsp"%>